import React, { useState } from "react";
import style from "./Home.module.css";
import { Tabs, message } from 'antd';
import { Card } from 'antd';
import { TeamOutlined } from '@ant-design/icons';
import { LockOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import { InsuranceOutlined } from '@ant-design/icons';
import { Flex, QRCode } from 'antd';
const value = 'https://ant.design';
export default function Login() {

    //路由
    const navigate = useNavigate();


    const onFinish = values => {
        console.log('Success:', values);
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };






    const onChange = key => {
        console.log(key);
    };
    //手机号
    const shoujihao = "17731491768";
    const [phone, setPhone] = useState("");
    //密码
    const mima = "123456";
    const [password, setPassword] = useState("");
    //验证码
    const yanzhengma = "1234";
    const [yanzheng, setYanzhengma] = useState("");

    const [yan, setYan] = useState(true);
    const [countdown, setCountdown] = useState(0); // 新增倒计时状态

    // 获取验证码
    const handeiyan = () => {
        setYan(false);
        setCountdown(60); // 开始倒计时 60 秒
        const timer = setInterval(() => {
            setCountdown(prev => {
                if (prev > 1) {
                    if(prev==57){
                        message.success('验证码为1234');    
                    }
                    return prev - 1;
                } else {
                    clearInterval(timer);
                    setYan(true);
                    return 0;
                }
            });
        }, 1000);
    };

    //注册
    const handelzhu = () => {
      if(phone.length==11 && password.length==6 && yanzhengma.length==4){
          message.success('注册成功');
          navigate('/home');
      }else{
          message.error('注册失败,验证码错误');
      }

    }


    return (
        <>
            <div className={style.home}
                style={{ backgroundImage: "url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)" }}
            >
                {/* <div className={style.title}> */}
                       
                    <Card variant="borderless" 
                    
                    title="卖家注册"
                    // 添加样式让标题居中
                    headStyle={{ textAlign: 'center' }}
                    style={{ backgroundColor: "rgba(255,255,255,0.8)",width: 400, height: 430,top: 200,left:650,position: "relavtive"}}>

                        

                           
                                <Form
                                    name="basic"
                                    labelCol={{ span: 8 }}
                                    wrapperCol={{ span: 16 }}
                                    style={{ maxWidth: 600 }}
                                    initialValues={{ remember: true }}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    autoComplete="off"
                                > 
                                
                                {/* 图片 */}
                                 <TeamOutlined style={{position: "relative", top: 35, left: 25}}/>
                                    <Form.Item  style={{position: "relative", top: 10, left: 50}}
                                        name="phone"
                                        // 添加规则，确保输入为数字且长度为 11
                                        rules={[
                                            { pattern: /^\d{11}$/, message: '请输入 11 位数字的手机号' },
                                        ]}
                                    >
                                        {/* 限制输入只能为数字 */}
                                        <Input 
                                            placeholder="手机号" 
                                            type="number" 
                                            maxLength={11}
                                            value={phone}
                                            onChange={(e) => setPhone(e.target.value)}
                                        />
                                    </Form.Item>
                                    <LockOutlined  style={{position: "relative", top: 10, left: 25}}/>
                                    <Form.Item  style={{position: "relative", top:-15, left: 50}}
                                      
                                        name="password"
                                       
                                    >
                                        <Input.Password 
                                        placeholder="密码"
                                        maxLength={6}
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                        />
                                    </Form.Item>


                                        {/* 验证码 */}
                                    <InsuranceOutlined  style={{position: "relative", top: -15, left: 25}}/>
                                    <Form.Item  style={{position: "relative", top:-40, left: 50 , width: 250}}
                                      
                                        name="yanzhengma"
                                       
                                    >
                                        <Input 
                                        placeholder="验证码"
                                        maxLength={4}
                                        value={yanzhengma}
                                        onChange={(e) => setYanzhengma(e.target.value)}
                                        />
                                    </Form.Item>
                                        <Button 
                                        disabled={phone.length !== 11 || password.length !== 6 || countdown > 0}
                                        style={{position: "relative", top: -97, left: 220, width: 100, height: 35, backgroundColor: "orange", color: "white", fontSize:14 }}
                                        onClick={() => handeiyan()}
                                    >
                                        {countdown > 0 ? `${countdown} 秒后重试` : yan ? '获取验证码' : '重新获取验证码'}
                                    </Button>



                                    <Form.Item label={null}>
                                        <Button  htmlType="submit" style={{width: 240, height: 35, color: "white", backgroundColor: "orange",position: "relative",  left: -70 ,top: -40}}
                                        
                                        onClick={()=>handelzhu()}
                                        >
                                            注册
                                        </Button>
                                        <Button  htmlType="submit" style={{width: 240, height: 35, color: "black", backgroundColor: "white",position: "relative",  left: -70, top: -30}}
                                        
                                        onClick={() => navigate('/home')}
                                        >

                                            已有账号？立即登录
                                        </Button>
                                        <span  htmlType="submit" style={{ color: "gray",position: "relative",  left: 30,top: -20, fontSize: 9}}
                                        onClick={() => navigate('/wang')}
                                        >
                                            忘记密码
                                        </span>
                                    </Form.Item>
                                </Form>

                         

                           
                
                    </Card>
                {/* </div> */}
            </div>
        </>
    )
}